import React, {useEffect, useState} from 'react';
import {Form, Input, message, Modal, Select, Radio, InputNumber} from "antd";
import {deviceActionList, deviceProductList, deviceTypeList, useCms, useRooms} from "@/pages/constant";

function UseAddEdit({queryList,CmsFormItem}) {

    const [open,setOpen] = useState(false),
        [loading,setLoading] = useState(false),
        [form] = Form.useForm();
    const deviceName = Form.useWatch("deviceName",form)
    function onCancel(){
        setOpen(false)
    }
    useEffect(()=>{
        if (open === false){
            form.resetFields();
        }else if(open.ID){
            form.setFieldsValue({
                ...open,
            })
        }
    },[open])
    function onOk(){
        form.validateFields().then(values => {
            if (open.ID){
                values.ID=open.ID
            }
            ax.post("/api/addDevice",{
                ...values,
            }).then(res=>{
                message.success(res.msg);
                queryList();
                onCancel();
            })
        })
    }
    return {
        setOpen,
        ModalDOM:<Modal
            title={(open?.ID?"编辑":"添加")+"设备"}
            open={open}
            onOk={onOk}
            onCancel={onCancel}
            confirmLoading={loading}
            width={800}
            maskClosable={false}
        >
            <Form
                labelCol={{span: 5}}
                wrapperCol={{span: 14}}
                form={form}
                initialValues={{
                    deviceName:"Aqara"
                }}
            >
                {CmsFormItem}

                <Form.Item
                    label={"设备名称"}
                    name={"name"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder={"请输入"}/>
                </Form.Item>
                <Form.Item
                    label={"设备厂家"}
                    name={"deviceName"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Radio.Group
                        options={deviceProductList}
                        optionType="button"
                        buttonStyle="solid"
                    />
                </Form.Item>
                {
                    deviceName !=="智能喇叭" && <Form.Item
                        label={"设备类型"}
                        name={"type"}
                        rules={[
                            {
                                required: true,
                                message: '请选择设备类型!',
                            },
                        ]}
                    >
                        <Select placeholder={"请选择"} options={deviceTypeList} />
                    </Form.Item>
                }
                {
                    deviceName !=="智能喇叭" && <Form.Item
                        label={"动作"}
                        name={"action"}
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Select placeholder={"请选择"} options={deviceActionList} />
                    </Form.Item>
                }
                <Form.Item
                    label={"设备ID"}
                    name={"deviceId"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder={"请输入"}/>
                </Form.Item>
                <Form.Item
                    label={"设备模型"}
                    name={"deviceModel"}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input placeholder={"请输入"}/>
                </Form.Item>
                {
                    deviceName === "Aqara" && <>
                        <Form.Item
                            label={"参数1(开)"}
                            name={"openOptions"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input.TextArea placeholder={"请输入"}/>
                        </Form.Item>
                        <Form.Item
                            label={"参数2(关)"}
                            name={"closeOptions"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input.TextArea placeholder={"请输入"}/>
                        </Form.Item>
                        <Form.Item
                            label={"自动关闭时间"}
                            name={"autoCloseSecond"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <InputNumber placeholder={"开门后几秒后关闭? 不自动关闭填0"} style={{width:"100%"}}/>
                        </Form.Item>
                    </>
                }



            </Form>
        </Modal>
    }
}

export default UseAddEdit;